<template>
  <el-col class="areaSelect-wrap" :span="24">
    <el-col :span="spanCount" class="select__street">
      <el-select @change="firstLevelChange" v-model="areaIds.areaId1" placeholder="请选择所属街道" :disabled="disabled1">
        <el-option label="请选择街道" value=""></el-option>
        <el-option v-for="item in firstArr" :key="item.deptId" :value="item.deptId" :label="item.deptName"></el-option>
      </el-select>
    </el-col>
    <el-col :span="spanCount" class="select__community">
      <el-select @change="secondLevelChange" v-model="areaIds.areaId2" placeholder="请选择所属小区" :disabled="disabled2" :multiple="multiple">
        <el-option label="请选择小区" :value="areaIds.areaId1"></el-option>
        <el-option v-for="item in secondArr" :key="item.deptId" :value="item.deptId" :label="item.deptName"></el-option>
      </el-select>
    </el-col>
    <el-col :span="spanCount" v-if="showThirdLevel" class="select__department">
      <el-select @change="thirdLevelChange" v-model="areaIds.areaId3" placeholder="请选择所属部门" :disabled="disabled3">
        <el-option label="请选择部门" :value="areaIds.areaId2"></el-option>
        <el-option v-for="item in thirdArr" :key="item.deptId" :value="item.deptId" :label="item.deptName"></el-option>
      </el-select>
    </el-col>
  </el-col>
</template>

<script>
export default {
  name: 'areaSelect',
  props: ['areaIds', 'selectModel', 'roleId', 'hideThird', 'multiple'],
  data () {
    return {
      tempPromise: {}, // promise暂存
      firstArr: [], // 第一级菜单列表
      secondArr: [], // 第二级菜单列表
      thirdArr: [], // 第三级菜单列表
      deptId: this.selectModel, // 与父组件进行通信的值
      watchSwitch: false, // 监听进入时的数据加载
      showThirdLevel: !this.hideThird,
      disabled1: false,
      disabled2: false,
      disabled3: false,
      spanCount: !this.hideThird ? 8 : 12
    }
  },
  watch: {
    selectModel (val) {
      // 初次进入页面
      if (!this.watchSwitch) {
        this.tempPromise.then(resolve => {
          this.watchSwitch = true
          if (this.areaIds.areaId1) {
            this.firstLevel(this.areaIds.areaId1)
          }
          if (this.areaIds.areaId2) {
            this.secondLevel(this.areaIds.areaId2)
          }
          this.deptId = val
        })
      } else {
        this.deptId = val
      }
    },
    deptId (val) {
      this.$emit('onAreaChange', val)
    },
    roleId (val) {
      if (val === 1) {
        this.areaIds.areaId3 = null
        this.showThirdLevel = true
        this.disabled1 = true
        this.disabled2 = true
        this.disabled3 = true
      } else if (val === 2) {
        // 如果是系统管理员，隐藏三级部门下拉框
        this.areaIds.areaId3 = null
        this.showThirdLevel = false
        this.disabled1 = false
        this.disabled2 = false
        this.disabled3 = false
      } else {
        this.showThirdLevel = true
        this.disabled1 = false
        this.disabled2 = false
        this.disabled3 = false
      }
      this.spanCount = this.showThirdLevel ? 8 : 12
    }
  },
  mounted: function () {
    this.disabled1 = false
    this.disabled2 = false
    this.disabled3 = false
    this.tempPromise = this.getList()
  },
  methods: {
    getList () {
      return new Promise(resolve => {
        let url = this.$base.getUrl('getTree')
        let params = {
          url: url,
          data: {}
        }
        this.$store.dispatch('getForm', params).then(res => {
          this.firstArr = res.nodes
          resolve()
        })
      })
    },
    // 街道onchange事件
    firstLevelChange (res) {
      this.watchSwitch = true
      this.secondArr = []
      this.thirdArr = []
      // this.areaIds.areaId2 = []
      this.areaIds.areaId3 = res
      for (let i of this.firstArr) {
        if (res === i.deptId) {
          this.secondArr = i.nodes || []
        }
      }
      // this.deptId.push(res)
      // this.$emit('onAreaId01Change', res)
    },
    // 小区onchange事件
    secondLevelChange (res) {
      this.watchSwitch = true
      this.thirdArr = []
      this.areaIds.areaId3 = res
      for (let i of this.secondArr) {
        if (res === i.deptId) {
          this.thirdArr = i.nodes || []
        }
      }
      this.$emit('onComponentChildChange', res)
      this.deptId = res
    },
    // 三级onchange时间
    thirdLevelChange (res) {
      this.deptId = res
    },
    // 初始有数据时调用
    firstLevel (res) {
      if (!this.areaIds.areaId2) {
        this.areaIds.areaId2 = res
        this.areaIds.areaId3 = res
      }

      for (let i of this.firstArr) {
        if (res === i.deptId) {
          this.secondArr = i.nodes || []
        }
      }
    },
    secondLevel (res) {
      if (!this.areaIds.areaId3) {
        this.areaIds.areaId3 = res
      }

      for (let i of this.secondArr) {
        if (res === i.deptId) {
          this.thirdArr = i.nodes || []
        }
      }
    }
  }
}
</script>

<style scoped>
.areaSelect-wrap {
  padding: 0 !important;
}
</style>
